<template>
    <div class="personal layout-pd">
        <el-row>
            <el-col :span="24">
                <el-row :gutter="20">
                    <el-col :span="24">
                        <div class="mt-4" style="margin-bottom: 10px;">
                            <el-input v-model="searchData.name" size="small" placeholder="请输入"
                                style="width: 300px;margin-right: 10px;" clearable @change="searchTypeHandle">
                                <template #append>
                                    <el-button type="primary" size="small" @click="searchTypeHandle">搜索</el-button>
                                </template>
                            </el-input>

                            <el-button type="primary" size="small" @click="openAdd">新增</el-button>
                        </div>

                        <el-table :data="levelData" style="width: 100%" size="small">
                            <el-table-column prop="name" label="名称" />
                            <el-table-column prop="level" label="级别">
                                <template #default="scope">
                                    <el-link type="primary">等级：{{ scope.row.level }}</el-link>
                                </template>
                            </el-table-column>
                            <el-table-column prop="needExp" label="所需经验值" />
                            <el-table-column prop="num" label="服务单价/分钟">
                                <template #default="scope">
                                    <el-link type="primary">{{ scope.row.num }}币/分钟</el-link>
                                </template>
                            </el-table-column>
                            <el-table-column prop="timeRanges" label="在线时间" >
                            </el-table-column>
                            <el-table-column prop="state" label="状态">
                                <template #default="scope">
                                    <el-tag size="small" :type="scope.row.state === '1' ? 'success' : 'warning'"
                                        disable-transitions>{{ scope.row.state === '1' ? '正常' : '停用' }}</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column fixed="right" label="操作" width="120">
                                <template #default="scope">
                                    <el-button link type="primary" size="small" @click.prevent="editDictData(scope.row)">
                                        编辑
                                    </el-button>
                                    <el-button link type="primary" size="small" @click.prevent="removeDictData(scope.row)">
                                        移除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="page-block">
                            <el-pagination v-model:currentPage="current" v-model:page-size="page"
                                :page-sizes="[10, 20, 30, 40]" :small="true" :disabled="false" :background="false"
                                layout="total, sizes, prev, pager, next, jumper" :total="total" :hide-on-single-page="true"
                                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
                        </div>
                    </el-col>
                </el-row>
            </el-col>

        </el-row>
    </div>

    <el-dialog v-model="dialogFormVisible" :title="formTitle" :before-close="handleFormClose" width="500px">
        <el-form ref="ruleFormRef" :model="dataForm" :rules="rules" label-width="100px" class="demo-ruleForm"
            :size="formSize" status-icon>
            <el-form-item label="名称" prop="name">
                <el-input v-model="dataForm.name" clearable />
            </el-form-item>
            <el-form-item label="级别" prop="level">
                <el-input-number v-model="dataForm.level" :min="1" size="small" controls-position="right" />
            </el-form-item>
            <el-form-item label="等级经验" prop="needExp">
                <el-input-number v-model="dataForm.needExp" :min="1" size="small" controls-position="right" />
            </el-form-item>
            <el-form-item label="服务单价" prop="num">
                <el-input-number v-model="dataForm.num" :min="1" size="small" controls-position="right" />
            </el-form-item>
            <el-form-item label="在线时间" prop="timeRange">
                <el-time-picker v-model="dataForm.timeRange" value-format="YYYY-MM-DD HH:mm:ss" format="HH:mm" is-range arrow-control range-separator="至"
                    start-placeholder="开始时间" end-placeholder="结束时间" />
            </el-form-item>
            <el-form-item label="状态" >
                <el-radio-group v-model="dataForm.state" class="ml-4">
                    <el-radio label="0">停用</el-radio>
                    <el-radio label="1">正常</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button size="small" @click="handleFormClose">取消</el-button>
                <el-button size="small" type="primary" @click="sumbitForm(ruleFormRef)">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script  lang="ts" name="personal">
import { reactive, computed, onMounted, toRefs } from 'vue';
import { formatAxis } from '/@/utils/formatTime';
import { useUserInfo } from '/@/stores/userInfo'
import { storeToRefs } from 'pinia';
import { useChatApi } from '/@/api/chat/index'
import Cookies from 'js-cookie'
import { Session, Local } from '/@/utils/storage'
import { ElMessage, ElMessageBox } from 'element-plus'
export default {
    setup(props, context) {
        const storeUserInfo = useUserInfo()
        const { userInfos } = storeToRefs(storeUserInfo)
        const chatApi = useChatApi()

        // 定义变量内容
        const state = reactive({
            uploadUrl: '/api/file/filaAttach/upload',
            headers: {
                '17work': Session.get('token')
            },
            formSize: 'small',
            rules: {
                name:[{ required: true, message: '请输入名称', trigger: 'blur' },],
                level:[{ required: true, message: '请输入等级', trigger: 'blur' },],
                needExp:[{ required: true, message: '请输入所需经验值', trigger: 'blur' },],
                num:[{ required: true, message: '请输入服务单价', trigger: 'blur' },],
                timeRange:[{ required: true, message: '请输入在线时长', trigger: 'blur' },],
            },
            levelData: [
            ],
            // 字典类型
            searchType: {
                current: 1,
                size: 10
            },
            total: 100,
            current: 1,
            page: 10,
            // 字典数据
            searchData: {
                current: 1,
                size: 30,
                enterpriseId: null,
                code: null
            },
            dictDataD: [],
            //添加表单数据
            dialogFormVisible: false,
            dataForm: {},
            formTitle: null,
            options: [{ label: '默认(Default)', value: 'default' },
            { label: '主要(primary)', value: 'primary' },
            { label: '成功(success)', value: 'success' },
            { label: '信息(info)', value: 'info' },
            { label: '警告(warning)', value: 'warning' },
            { label: '危险(danger)', value: 'danger' }],
            nowOptType: {}
        });

        // 当前时间提示语
        const currentTime = computed(() => {
            return formatAxis(new Date());
        });

        const backageImagesOnSuccess = (response, uploadFiles) => {
        }
        const handleSizeChange = e => {
            state.searchType.size = e
            queryList()
        }
        const handleCurrentChange = e => {
            state.searchType.current = e
            state.current = e
            queryList()
        }

        const queryList = () => {
            chatApi.userCustomerServiceLevelList(state.searchData).then(res => {
                state.levelData = res.data.records
                state.total = res.data.total
            })
        };
        const openAdd = () => {
            state.formTitle = '添加'
            state.dialogFormVisible = true
            restForm()

        }
        const editDictData = (data) => {
            state.formTitle = '编辑'
            state.dialogFormVisible = true
            data.state = data.state + ""
            data.timeRange = [data.workStartTime,data.workEndTime]
            state.dataForm = data
        }
        const removeDictData = (row) => {
            ElMessageBox.confirm(
                '是否确认删除名称为"' + row.name + '"的数据项？',
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            ).then(() => {
                chatApi.userCustomerServiceLevelRemove(row.id).then(res => {
                    if (res.code == 0) {
                        ElMessage({
                            type: 'success',
                            message: '删除成功',
                        })
                        queryList()
                    } else {
                        ElMessage({
                            type: 'error',
                            message: '删除失败：' + res.message,
                        })
                    }
                })

            }).catch()
        }

        const handleFormClose = () => {
            state.dialogFormVisible = false
        }
        const restForm = () => {
            state.dataForm = {
                name: null,
                num: 0,
                level: 1,
                needExp: 0,
                state: "1",
                id: null
            }
        }
        const sumbitForm = async (formEl) => {
            if (!formEl) return
            await formEl.validate((valid) => {
                if (valid) {
                    state.dataForm.workStartTime = state.dataForm.timeRange[0]
                    state.dataForm.workEndTime = state.dataForm.timeRange[1]
                    if (state.dataForm.id) {
                        chatApi.userCustomerServiceLevelUpdate(state.dataForm).then(res => {
                            if (res.code == 0) {
                                ElMessage.success("修改成功");
                                handleFormClose()
                                queryList()
                            }
                        })
                    } else {
                        chatApi.userCustomerServiceLeveCreate(state.dataForm).then(res => {
                            if (res.code == 0) {
                                ElMessage.success("新增成功");
                                handleFormClose()
                                queryList()
                            }
                        })
                    }


                }
            })
        };

        const searchTypeHandle = () => {
            state.searchType.current = 1
            queryList()
        }

        const {
            ruleFormRef
        } = toRefs(props)

        onMounted(() => {
            queryList()
        })
        return {
            currentTime,
            ruleFormRef,
            backageImagesOnSuccess,
            handleSizeChange,
            handleCurrentChange,
            openAdd,
            handleFormClose,
            sumbitForm,
            editDictData,
            removeDictData,
            restForm,
            searchTypeHandle,
            queryList,
            ...toRefs(state),
        }
    }
}
</script>

<style scoped lang="scss">
.layout-pd {
    padding: 20px 20px 0px 20px;

}
</style>